<template>
  <div class="page">
    <div class="head-bar">
      <div class="left-img">
        <img :src="itemData.images.split(',')[0]" alt="">
      </div>
      <div class="right-info">
        <div>
          <span class="title">房间类型</span>
          <p class="typeName">{{ itemData.typeName }}</p>
        </div>
        <div class="label-container">
          <span class="title">支持设施</span>
          <span v-for="(label,index) in labels" :key="index" class="label">{{ label }}</span>
        </div>
        <div class="price-bar">
          <span class="title">价钱</span>
          <span class="price">{{ itemData.typePrice }}</span>
        </div>
        <div>
          <span class="title">描述</span>
          <span class="des">{{ itemData.des }}</span>
        </div>
      </div>
    </div>
    <div class="body-bar">
      <div class="top-des">
        <div class="title">
          <h1>申请入住</h1>
        </div>
        <div class="requestInfo-bar">
          <div class="input-left">
            <h3>联系人</h3>
            <div>
              <p>姓名</p>
              <span v-if="!modifyName">{{userInfo.name}}</span>
              <input v-if="modifyName" class="input-bar" type="text" placeholder="用户名" v-model="userInfo.name">
              <button @click="modifyName = !modifyName">修改</button>
            </div>
            <div>
              <p>联系方式</p>
              <span v-if="!modifyPhone">{{userInfo.phone}}</span>
              <input v-if="modifyPhone" class="input-bar" type="text" placeholder="请留下你的手机号" v-model="userInfo.phone">
              <button @click="modifyPhone = !modifyPhone">修改</button>
            </div>
          </div>
          <div class="input-right">
            <h3>入住时间</h3>
            <div>
              <p>入住日期</p>
              <span>{{ checkInDay || "请选择日期" }}</span>
              <button @click="openWindow(0, today)">选择</button>
            </div>
            <div>
              <p>退房日期</p>
              <span>{{ checkOutDay || "请选择日期" }}</span>
              <button @click="openWindow(1, nextDay)">选择</button>
            </div>
            <Calendar :setDateFun="getDate"></Calendar>
          </div>
        </div>
      </div>

      <div class="result">
        <p>共入住 {{ totalDays }} 天</p>
        <p>费用 {{ totalPrice }} 元</p>
      </div>
      <button class="commit" @click="commitRequest()">提交申请</button>
    </div>
  </div>
</template>

<script>
import Calendar from "@/components/Calendar";

export default {
  name: "DetailPage",
  components:{
    Calendar
  },
  data(){
    return{
      itemData:{},
      userInfo:{
        name:'',
        phone:''
      },
      checkInDay:'',
      checkOutDay:'',
      modifyName:false,
      modifyPhone:false,
      createTIme:'',
    }
  },
  computed:{
    labels(){
      //  获取itemDate.labels将其拆分成数组并返回。
      return (this.itemData.labels || "").split(',');
    },
    getUserInfo(){
      return JSON.parse(window.localStorage.getItem("USERINFO"));
    },
    // 将入住日期转为Date对象
    checkInDate(){
      return new Date(this.checkInDay);
    },
    // 将退房日期转为Date对象
    checkOutDate(){
      return new Date(this.checkOutDay);
    },
    // 总天数
    totalDays(){
      return (this.checkOutDate - this.checkInDate)/(1000*3600*24) || 0;
    },
    totalPrice(){
      return this.totalDays * this.itemData.typePrice || 0;
    },
    // 当天零点时间戳（10位）
    today(){
      return (new Date(new Date().toLocaleDateString()).getTime()/1000).toString();
    },
    // 入住时间下一天零点时间戳（10位）
    nextDay(){
      // return  (parseInt(this.checkInDay) + 86400).toString();
      return (new Date(this.checkInDate).getTime()/1000 + 86400).toString();
    }
  },
  mounted() {
    this.isAllowAccess();
    this.initUserInfo();
  },
  methods:{
    // 回调事件，获取数据
    getValue(date){
      this.createTIme = date;
    },
    prepareRequestData(){
      // 准备提交，将数据整理出来
      let now = Date.now();
      this.$bus.$emit('timeTrans', now, this.getValue);
      let userId = this.getUserInfo.userId;
      let customerName = this.userInfo.name;
      let customerPhone = this.userInfo.phone;
      let totalPrice = this.totalPrice;
      let inTime = this.checkInDay;
      let outTime = this.checkOutDay;
      let typeNum = this.itemData.typeNum;
      return {
        createTime:this.createTIme,
        userId,
        customerName,
        customerPhone,
        totalPrice,
        inTime,
        outTime,
        typeNum
      }
    },
    commitRequest(){
      // （携带数据）提交申请入住
      let info = this.prepareRequestData();
      if (this.totalDays<1){
        alert("提交失败，预约入住日期有误。");
        return ;
      }
      this.$store.dispatch("createOrder", info);
      this.$router.push("/");
    },
    isAllowAccess(){
      // 配置在mounted载入时触发，如果没有数据则跳回导航页'/'
      if (this.$route.params.itemData){
        this.itemData = this.$route.params.itemData;
      }else{
        this.$router.push("/");
      }
    },
    initUserInfo(){
      this.userInfo.name = this.getUserInfo.userName;
      this.userInfo.phone = this.getUserInfo.userPhone;
    },
    openWindow(mode, startDate) {
      this.$bus.$emit('openWindow', mode, startDate);
    },
    // 设置入住时间
    setCheckInDay(date){
      this.checkInDay = date;
    },
    // 设置退房时间
    setCheckOutDay(date){
      this.checkOutDay = date;
    },
    // 获取日期
    getDate(mode, date){
      if (mode==0){
        this.setCheckInDay(date);
      }else if(mode==1){
        this.setCheckOutDay(date);
      }
    },
  },
}
</script>

<style scoped lang="less">
.page{
  width: 1240px;
  min-height: 100vh;

  .head-bar{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height:35vh;
    background: #51446e;
    padding: 20px;

    .left-img{
      height: 100%;

      img{
        height: 100%;
      }
    }

    .right-info{
      position: relative;
      display: block;
      margin-left: 20px;
      width: 100%;
      //background-color: rgba(255,255,255, 0.2);
      padding: 20px;
      div{
        display: flex;
        justify-content: flex-start;

        .typeName{
          font-size: 20px;
          color: black;
          font-weight: bolder;
        }
        .title{
          height: 30px;
          width: 120px;
          font-size: 20px;
          color: #ffb508;
        }
      }
      .price-bar{
        //position: absolute;
        //bottom: 20px;
      }

      .title{
        font-weight: bolder;
        font-size: 30px;
      }

      .label-container{
        .label{
          width: 60px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background-color: rgba(0,0,0,0.6);
          font-size: 14px;
          color: whitesmoke;
          margin-right: 10px;
        }
      }

      .des{
        display: block;
        font-size: 16px;
        color: whitesmoke;
        font-style: italic;

        &::before{
          content: '”';
        }
        &::after{
          content: '。“';
        }
      }

      .price{
        display: block;
        color: red;
        font-size: 20px;
        font-weight: bolder;

        &:after{
          content: " ￥/晚";
          color: black;
          font-size: 14px;
          font-weight: normal;
        }
      }

    }
  }

  .body-bar{
    width: 100%;
    min-height: 20vh;
    background: #ffb508;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .top-des{
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
      .requestInfo-bar{
        display: flex;
        justify-content: flex-start;

        p{
          min-width: 80px;
          display: block;
          float: left;
        }

        .input-left{
          width: 30%;
          div{
            .input-bar{
              display: inline-block;
              width: 150px;
              color: #3a3a3a;
              padding: 2px;
              background-color: #ffb508;
              margin-right: 10px;
              outline: none;
              border: none;
            }
            span{
              display: inline-block;
              width: 150px;
              color: #3a3a3a;
              padding: 2px;
              background-color: white;
              margin-right: 10px;
            }
            button{
              width: 50px;
              height: 23px;
              padding: 3px;
              color: white;
              background-color: #3a3a3a;
              border: none;
              cursor: pointer;
              user-select: none;
              border-radius: 5px;
            }
          }

        }

        .input-right{
          width: 70%;
          p{
            margin-right: 20px;
          }
          div{
            span{
              display: inline-block;
              width: 150px;
              color: #3a3a3a;
              padding: 2px;
              background-color: white;
              margin-right: 10px;
            }
            button{
              width: 50px;
              height: 23px;
              padding: 3px;
              color: white;
              background-color: #3a3a3a;
              border: none;
              cursor: pointer;
              user-select: none;
              border-radius: 5px;
            }
          }
        }
      }
    }

    .result{
      display: flex;
      justify-content: flex-end;
    }



    .commit{
      height: 60px;
      border: none;
      background-color: #3a3a3a;
      color: #FFFFFF;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>